<template>
  <!--会序册-->
  <view class="main_section">
    <!--    会议用车-->
    <view class="section_1">
      <view class="btn_section" v-if="meetingSubjectInfo.catalog_files.length < 1">
        暂无文件...
      </view>

      <view class="ul" v-else>
        <view class="li" v-for="(v,k) in meetingSubjectInfo.catalog_files" :key="k">
          <view class="title">{{v.file_name}}</view>
          <view class="btn_box">
            <view class="btn"
                  @click="openFile(`${v.file_url}`)">
              查看
            </view>
            <view class="btn" @click="openFile(`${v.file_url}`)">下载</view>
          </view>
        </view>
<!--        <view class="li">-->
<!--          <view class="title">文件1.pdf</view>-->
<!--          <view class="btn_box">-->
<!--            <view class="btn">查看</view>-->
<!--            <view class="btn">下载</view>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="li">-->
<!--          <view class="title">文件1.pdf</view>-->
<!--          <view class="btn_box">-->
<!--            <view class="btn">查看</view>-->
<!--            <view class="btn">下载</view>-->
<!--          </view>-->
<!--        </view>-->
      </view>
    </view>

  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      meetingSubjectId:'',//会议主题id

      //会议主题信息
      meetingSubjectInfo:{},
    }
  },
  onLoad(options) {
    if (options.meetingSubjectId) {
      this.meetingSubjectId = options.meetingSubjectId
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    async init() {
      await this.getMeetingSubjectInfo()
    },

    //获取会议主题配置信息
    async getMeetingSubjectInfo(){
      let params = {
        id: this.meetingSubjectId
      }
      let res = await apiRoute.getMeetingSubjectInfo(params)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.meetingSubjectInfo = res.data
    },

    /**
     * 打开文件
     * @param file_url = https://example.com/somefile.pdf
     */
    openFile(file_url) {
      //判断file_url是图片还是文件(pdf,word)

      // 获取文件名称或路径中的最后一个点号位置
      const lastDotIndex = file_url.lastIndexOf('.');

      // 如果没有找到点号或者点号在开头，说明不是有效文件类型
      if (lastDotIndex === -1 || lastDotIndex === 0) {
        uni.showToast({title: '无效的文件格式'});
        return;
      }

      // 提取文件扩展名并转为小写
      const fileType = file_url.slice(lastDotIndex + 1).toLowerCase();

      // 定义支持的图片类型
      const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];

      // 判断是否为图片
      if (imageTypes.includes(fileType)) {
        // 是图片，打开预览
        uni.previewImage({
          urls: [file_url], // 预览图链接列表
          current: file_url // 当前显示的图片链接
        })
      } else {
        uni.downloadFile({
          url: file_url,
          success: function (res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              showMenu: true,//右上角是否有可以转发分享的功能
              success: function (res) {
                console.log('打开文档成功');
              }
            });
          }
        });
      }

    },


  }
}
</script>

<style lang="less" scoped>
.main_section{
  padding-top: 20rpx;
  padding-bottom: 40rpx;

  .section_1{
    .btn_section{
      margin-top: 30rpx;
      text-align: center;
      font-size: 35rpx;
    }
    .ul{
      margin-top: 30rpx;
      padding: 20rpx;

      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        padding: 20rpx;
        border: 1px solid #cccccc;
        border-radius: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        .title{
          width: 80%;
          //文字溢出隐藏
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }
        .btn_box{
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10rpx;
          .btn{
            color: #2a82e4;
          }
        }

      }
    }
  }

}
</style>
